<!-- 凭证审核信息 -->
<template>
  <div class="warp pa-15">
    <div class="disFlxJS">
      <span class="fz-14 k">审核状态</span>
      <span
        :class="[
          'fz-14 v',
          dataInfo?.auditStatus === AuditStatusEnum.CHECKPENDING
            ? 'warning'
            : dataInfo?.auditStatus === AuditStatusEnum.AUDITED
            ? 'success'
            : 'error',
        ]"
      >
        {{ getAuditText() }}
      </span>
    </div>
    <template v-if="dataInfo?.auditStatus !== AuditStatusEnum.CHECKPENDING">
      <div class="disFlxJS">
        <span class="fz-14 k">审核说明</span>
        <span class="fz-14 v">{{ dataInfo?.remarks }}</span>
      </div>
      <div class="disFlxJS">
        <span class="fz-14 k">审核人</span>
        <span class="fz-14 v">{{ dataInfo?.auditUserName }}</span>
      </div>
      <div class="disFlxJS">
        <span class="fz-14 k">审核时间</span>
        <span class="fz-14 v">{{ dataInfo?.auditTime }}</span>
      </div>
    </template>
    <div class="disFlxJS">
      <span class="fz-14 k">凭证提交人</span>
      <span class="fz-14 v">{{ dataInfo?.submitName }}</span>
    </div>
    <div class="disFlxJS">
      <span class="fz-14 k">提交时间</span>
      <span class="fz-14 v">{{ dataInfo?.submitTime }}</span>
    </div>
    <div class="disFlxJS">
      <span class="fz-14 k">到期时间</span>
      <span class="fz-14 v">{{ memberInfo?.memberEndTime }}</span>
    </div>
    <div class="disFlxJS">
      <span class="fz-14 k">缴费状态</span>
      <span class="fz-14 v">{{ getPaymentStatusText() }}</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import type { IPaymenrecordByIdResult,  ISettingInfoResData } from '@/api/admin/types';
  import { AuditStatusEnum } from '@/enums/membershipEnum';
import dictionary from '@/utils/dictionary';
  import { type PropType } from 'vue';

  const props = defineProps({
    dataInfo: {
      type: Object as PropType<IPaymenrecordByIdResult>,
    },
    memberInfo: {
      type: Object as PropType<ISettingInfoResData>,
    }
  });

  function getAuditText() {
    if (props.dataInfo?.auditStatus === AuditStatusEnum.CHECKPENDING) return '待审核';
    else if (props.dataInfo?.auditStatus === AuditStatusEnum.AUDITED) return '已通过';
    else if (props.dataInfo?.auditStatus === AuditStatusEnum.REFUSAL) return '已驳回';
    else return '未知';
  }

  function getPaymentStatusText(){
    const dicts = dictionary.getLocal('paymentStatus');
    let item = dicts.find(f => f.dictValue === props.memberInfo?.paymentStatus)
    return item?.dictLabel
  }
</script>
<style lang="scss" scoped>
  .warp {
    .disFlxJS:not(:last-child) {
      margin-bottom: 30rpx;
    }
    .disFlxJS {
      .k {
        color: $uni-text-color;
      }
      .v {
        color: $uni-text-color-placeholder;
      }
    }
    .warning {
      color: $uni-color-warning !important;
    }
    .success {
      color: $uni-color-success !important;
    }
    .error {
      color: $uni-color-error !important;
    }
  }
</style>
